﻿<%@ Page Title="" Language="C#" MasterPageFile="../MasterPages/StoreMaster.master" AutoEventWireup="true" Inherits="Codagenic.Store.Presentation.Web.Pages.Stockists" %>
<%@ Register TagPrefix="codagenic" Namespace="Codagenic.UI.Controls" assembly="Codagenic.UI.Controls"%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div class="sixteen columns">

        <h1>Store Locator</h1>

        <asp:PlaceHolder ID="phSearchForm" runat="server">

            <asp:Panel runat="server" DefaultButton="btnSearch" CssClass="row">
                <div id="location-search" class="location-search">
                    <div style="margin-bottom:5px;">
                        <label for="<%= txtLocation.ClientID %>"><strong>Find your nearest store by City, State or Postcode</strong></label>

                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                            ControlToValidate="txtLocation" 
                            Display="Dynamic" 
                            ErrorMessage="You  must enter a location"></asp:RequiredFieldValidator>  
                    </div>
                    <div>
                        <asp:TextBox ID="txtLocation" runat="server" CssClass="input-text input-text-large send-left input-text-search" placeholder="City, State or Postcode"></asp:TextBox>
                        <asp:Button ID="btnSearch" runat="server" 
                            OnClick="btnSearch_OnClick" 
                            Text="Search"
                            CssClass="ui-button trim-right send-left input-btn-search" />
                        

                        <a class="ui-button trim-right send-right btn-all" href="?action=all">Display All Stores</a>
                    </div>
                </div>
            </asp:Panel>

        </asp:PlaceHolder>

        <asp:PlaceHolder ID="phSearchResults" runat="server" Visible="false">

            <div class="row">

                <h5><asp:Literal ID="ltlSearchResultsTitle" runat="server"></asp:Literal></h5>

                <codagenic:CGGroupingRepeater id="rpStockists" runat="server" OnItemDataBound="rpStockists_OnItemDataBound">
                    <HeaderTemplate>
                        <table cellpadding="0" cellspacing="0" class="stores-table">
                    </HeaderTemplate>
                    <GroupTemplate>
                        <tr>
                            <td>
                                <p><strong><%# Eval("State") %></strong></p>
                            </td>
                        </tr>
                    </GroupTemplate>
                    <ItemTemplate>
                        <tr>
                            <td>
                                <asp:Literal ID="ltlCity" runat="server" /><a id="ctlAnchor" runat="server"><%# Eval("Title") %></a>
                            </td>
<%--                            <td>
                                <%# Eval("Phone") %>
                            </td>
                            <td>
                                <a id="ctlWebsite" runat="server"><%# Eval("WebsiteUrl") %></a>
                            </td>--%>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                    <EmptyTemplate>
                        <p>There were no results found.</p>
                    </EmptyTemplate>
                </codagenic:CGGroupingRepeater>

            </div>

        </asp:PlaceHolder>

        <asp:PlaceHolder ID="phStoreDetails" runat="server">
            
            <div class="row">
                <a id="ctlBackAnchor" runat="server" class="ui-button send-left">Back to Store Listing</a>
            </div>

            <div class="container store-details">
                <div class="seven columns alpha">
                
                    <h3><asp:Literal ID="ltlStoreTitle" runat="server"></asp:Literal></h3>

                    <asp:Literal ID="ltlStreetAddress" runat="server"></asp:Literal>
                    
                    <p><asp:Literal ID="ltlWebsite" runat="server"></asp:Literal></p>
                    <p><asp:Literal ID="ltlPhone" runat="server"></asp:Literal></p>
                    <p><asp:Literal ID="ltlDescription" runat="server"></asp:Literal></p>

                    <asp:PlaceHolder ID="phDisplayStoreOnMap" runat="server">
                        <p><a id="display-store-map" class="ui-button ui-button-secondary trim-right">Driving Directions and Map</a></p>
                    </asp:PlaceHolder>
    
                    <asp:Repeater ID="rpBrands" runat="server">
                        <HeaderTemplate>
                            <h4>Brands</h4>
                            <ul>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <li><%# Eval("Title")%></li>
                        </ItemTemplate>
                        <FooterTemplate>
                            </ul>
                        </FooterTemplate>
                    </asp:Repeater>

                </div>
                <div class="nine columns omega" style="position:relative; min-height:400px">
                
                    <div id="store-image" class="map-image">
                        <asp:Image ID="ctlStoreImage" runat="server" />
                    </div>

                    <div id="store-map" class="store-map map-image">
                        <div id="store_map_canvas" class="map-area" style="width:500px; height:600px;"></div>
                    </div>

                </div>                      
            </div>

            <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
            <script type="text/javascript">

                function init_map(map_canvas_id, lat, lng, zoomLevel, markerOptions, overlayOptions) {

                    var myLatLng = new google.maps.LatLng(lat, lng);

                    var options = {
                        zoom: zoomLevel,
                        center: myLatLng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        disableDefaultUI: true,
                        panControl: true,
                        zoomControl: true
                    };

                    var map_canvas = document.getElementById(map_canvas_id);

                    var map = new google.maps.Map(map_canvas, options);

                    var marker = new google.maps.Marker(markerOptions);
                    marker.setAnimation(google.maps.Animation.NONE);
                    marker.setMap(map);

                    var info = new google.maps.InfoWindow(overlayOptions);
                    info.open(map, marker);

                    google.maps.event.addListener(marker, 'click', function () {
                        return false;
                    });
                }

            </script>
            <asp:Literal ID="ltlStoreMapScript" runat="server"></asp:Literal>

        </asp:PlaceHolder>

    </div>
    
    <%--<script type="text/javascript" src="/store/js/google.map.helper.js"></script>--%>

</asp:Content>
